<template>
  <div class="form">
    <el-container class="form-container">
      <el-container class="main-container">
        <el-aside width="250px">
          <div class="components-list">
            <template v-if="basicFields.length">
              <h4 class="components-list-title">基础组件</h4>
              <draggable
                tag="ul"
                :list="basicComponents"
                v-bind="{
                  group: { name: 'people', pull: 'clone', put: false },
                  sort: false,
                  ghostClass: 'ghost',
                }"
                :clone="cloneData"
                @start="drag = true"
                @end="drag = false"
              >
                <li
                  v-for="(element, index) in basicComponents"
                  :key="element.type"
                  class="components-list-widget-label"
                  @click="selectListItem(index)"
                >
                  <a>
                    <el-icon :size="20">
                      <component :is="element.icon" />
                    </el-icon>
                    <span>{{ element.name }}</span>
                  </a>
                </li>
              </draggable>
            </template>
          </div>
        </el-aside>
        <el-container class="center-container" direction="vertical">
          <el-main
            class="center-main"
            :class="{ 'widget-empty': state.widgetForm.list.length == 0 }"
          >
            <widget-form
              v-if="!resetJson"
              ref="widgetForm"
              :data="state.widgetForm"
              v-model:select="state.widgetFormSelect"
            ></widget-form>
          </el-main>
        </el-container>
        <el-aside class="widget-config-container">
          <el-tabs
            v-model="configTabActiveName"
            class="config-tabs"
            stretch
            @tab-click="handleTabClick"
          >
            <el-tab-pane label="字段属性" name="widget">
              <widget-config
                v-show="configTabActiveName == 'widget'"
                :data="state.widgetFormSelect"
              ></widget-config>
            </el-tab-pane>
            <el-tab-pane label="表单属性" name="form">
              <form-config
                v-show="configTabActiveName == 'form'"
                :data="state.widgetForm.config"
              ></form-config>
            </el-tab-pane>
          </el-tabs>
        </el-aside>
      </el-container>
      <el-footer height="16px" style="font-size: 12px"
        >Powered by form shuai</el-footer
      >
    </el-container>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { VueDraggableNext as draggable } from "vue-draggable-next";
import { basicComponents } from "./config";
import { cloneDeep } from "lodash";
import FormConfig from "./FormConfig.vue";
import WidgetForm from "./WidgetForm.vue";
import WidgetConfig from "./WidgetConfig.vue";
import CusDialog from "./CusDialog";
const props = defineProps({
  basicFields: {
    type: Array,
    default: () => [
      "input",
      "textarea",
      "number",
      "radio",
      "checkbox",
      "time",
      "date",
      "rate",
      "color",
      "select",
      "switch",
      "slider",
      "text",
    ],
  },
});
const drag = ref(false);
const configTabActiveName = ref("widget");
const resetJson = ref(false);
const state = reactive({
  basicComponents: basicComponents,
  selectedIdx: -1,
  basicFields: ["input", "textarea", "button", "select"],
  widgetForm: {
    list: [],
    config: {
      labelWidth: 100,
      labelPosition: "right",
      size: "small",
    },
  },
  widgetFormSelect: null,
});
const cloneData = (origin) => cloneDeep(origin);
const selectListItem = (index) => {
  state.selectedIdx = index;
};
const handleTabClick = (value) => {
  configTabActiveName.value = value.paneName;
};
</script>
<style scoped lang="scss">
@import "../../style/index.scss";
.form {
  height: 100%;
  &-container {
    background: #fff;
    height: 100%;
    border: 1px solid #e0e0e0;
    min-width: 1000px;
    .main-container {
      min-height: calc(100% - 20px);
      border-bottom: 1px solid #e0e0e0;
      .el-aside {
        flex: 0 0 250px;
        border: none;
      }
      .center-container {
        border: none;
        border-left: 1px solid #e0e0e0;
        border-right: 1px solid #e0e0e0;
        .center-main {
          padding: 0;
        }
      }
    }
    .el-footer {
      text-align: right;
      height: 16px;
    }
    .components-list {
      ul {
        position: relative;
        overflow: hidden;
        padding: 0 10px 10px;
        margin: 0;
      }
      &-title {
        margin: 12px auto;
        padding-left: 18px;
        font-weight: normal;
      }
      &-widget-label {
        font-size: 12px;
        display: block;
        width: 45%;
        line-height: 26px;
        position: relative;
        float: left;
        left: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 1%;
        color: #333;
        border: 1px solid #f4f6fc;

        &:hover {
          color: $primary-color;
          border: 1px dashed $primary-color;
        }

        & > a {
          display: block;
          cursor: move;
          background: #f4f6fc;
          border: 1px solid #f4f6fc;

          .icon {
            margin-right: 6px;
            margin-left: 3px;
            font-size: 14px;
            display: inline-block;
            vertical-align: middle;
          }

          span {
            display: inline-block;
            vertical-align: middle;
            padding-left: 8px;
          }
        }
      }
    }
    &-center {
      border-left: 1px solid #e0e0e0;
      border-right: 1px solid #e0e0e0;
      position: relative;
      .el-main {
        padding: 0;
        position: relative;
        background: #fafafa;
      }
    }
    .widget-config {
      position: relative;
    }
  }
}
</style>
